<html> 
<head> 
<script type="text/javascript"> 
	function getFileUrl(sourceId) { 
		var url; 
		if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
		url = document.getElementById(sourceId).value; 
	} 
		else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} 
		else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} 
		return url; 
	}
	function preImg(sourceId, targetId) { 
		var url = getFileUrl(sourceId); 
		var imgPre = document.getElementById(targetId); 
		imgPre.src = url; 
	} 
</script> 

</head> 

<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{% load staticfiles %} 
<p><input type="file" name="img" id='img1' accept=".jpg,.jpeg,.gif,.png" onchange="preImg(this.id,'imgView')" ></p>
<p>
<input type="checkbox" name="selMod" value="InceptionV3" id="InceptionV3" checked="checked"> 
<label for="InceptionV3">InceptionV3</label>
<input type="checkbox" name="selMod" value="InceptionV4" id="InceptionV4" checked="checked">
<label for="InceptionV4">InceptionV4</label>
<input type="checkbox" name="selMod" value="InceptionResnetV2" id="InceptionResnetV2" checked="checked">
<label for="InceptionResnetV2">InceptionResnetV2</label>
</p>
<p><button type="submit" onclick="waiting()">分析</button></p>
<p><img id="imgView" src="" style="display: block;" hidden="hidden"/> </p>
<p><img id="imgView2" src="{% static imgView %}"  height=400px hidden="hidden"></p>
<p id="demo"></p>
<p id="res1"></p>
<p id="res2"></p>
<p id="res3"></p>
<!--input id="fb1" type="button" value="满意" hidden="hidden" onclick="getReply()"/>
<input id="fb2" type="button" value="一般" hidden="hidden" onclick="getReply()"/>
<input id="fb3" type="button" value="不满意" hidden="hidden" onclick="getReply()"/--->

<script type="text/javascript">
	function getFileUrl(sourceId) { 
		var url; 
		if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
		url = document.getElementById(sourceId).value; 
	} 
		else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} 
		else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} 
		return url; 
	}

   function waiting() {
      if (document.getElementById("demo").innerHTML=="计算中....") {
         alert("正在计算中，请勿重复提交！")
         return
      }
      if (document.getElementById("img1").value[0] == null) {
         alert("未找到图片，请重新输入图片！")
         return
      }
      document.getElementById("demo").innerHTML="计算中...."
      var url = getFileUrl('img1'); 
      var imgPre = document.getElementById('imgView'); 
      //imgPre.src = url; 
      document.getElementById("imgView").style.display="inline";
      document.getElementById("imgView2").style.display="none";
      document.getElementById("fb1").style.display="none";
      document.getElementById("fb2").style.display="none";
      document.getElementById("fb3").style.display="none";
   }
   
   function preImg(i, v) {
      var docObj = document.getElementById(i);
      var files = document.getElementById(i).value;
      if (docObj.files && docObj.files[0]) {
         var img = new Image;
         img.onload = function(){
            var width = img.width;
            var height=img.height;
            var filesize = img
            if(width<299 || height<299){
                alert("图片尺寸太小，最小图片限制为299*299");
                document.getElementById(i).value=''
            }else{
               var url = getFileUrl(i);
               var view = document.getElementById(v); 
               view.src = url
               view.style.height = 400
               document.getElementById("imgView").style.display="inline";
               document.getElementById("imgView2").style.display="none";
               document.getElementById("demo").innerHTML="";
               document.getElementById("res1").innerHTML="";
               document.getElementById("res2").innerHTML="";
               document.getElementById("res3").innerHTML="";
               document.getElementById("fb1").style.display="none";
               document.getElementById("fb2").style.display="none";
               document.getElementById("fb3").style.display="none";
            }
         };
      img.onerror=function(){
         alert("error!");
      };
      img.src=window.URL.createObjectURL(docObj.files[0]);
      }
   }

   function getReply() {
      document.getElementById("fb1").style.display="none";
      document.getElementById("fb2").style.display="none";
      document.getElementById("fb3").style.display="none";
   }
</script>

<script type="text/javascript"> 
   var result_v3 = {{ result_v3|safe }};
   var result_v4 = {{ result_v4|safe }};
   var result_v2 = {{ result_v2|safe }};
   document.getElementById("demo").innerHTML="预测结果：";
   if (result_v3.length > 0) {
   document.getElementById("res1").innerHTML="InceptionV3:"+"<br>"+result_v3[0]+"<br>"+result_v3[1]+"<br>"+result_v3[2];}
   if (result_v4.length > 0) {
   document.getElementById("res2").innerHTML="InceptionV4:"+"<br>"+result_v4[0]+"<br>"+result_v4[1]+"<br>"+result_v4[2];}
   if (result_v2.length > 0) {
   document.getElementById("res3").innerHTML="InceptionResnetV2:"+"<br>"+result_v2[0]+"<br>"+result_v2[1]+"<br>"+result_v2[2];}
   
   document.getElementById("imgView").style.display="none";
   document.getElementById("imgView2").style.display="inline";
   document.getElementById("fb1").style.display="inline";
   document.getElementById("fb2").style.display="inline";
   document.getElementById("fb3").style.display="inline";
</script> 

</form>


</html> 